<template>  
  <div class="bottom-bar">  
    <div  
      v-for="(item, index) in menuItems"  
      :key="index"  
      class="menu-item"  
      :class="{ active: activeIndex === index }"  
      @click="setActive(index)"  
    >  
      <div class="item-label">{{ item.name }}</div>  
      <img v-if="activeIndex === index" src="@/assets/images/images/index_01_22.png" alt="选中图标" class="item-icon" />  
      <img v-else src="@/assets/images/images/index_01_24.png" alt="未选中图标" class="item-icon" />  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  name: "BottomBar",  
  data() {  
    return {  
      activeIndex: 0, // 当前选中的菜单项索引  
      menuItems: [  
        { name: "驾驶仓" },  
        { name: "点检管理" },  
        { name: "保养管理" },  
        { name: "报警管理" },  
        { name: "备件管理" },  
        { name: "监控管理" },  
        { name: "报警界面" },  
        { name: "统计分析" },  
      ],  
    };  
  },  
  methods: {  
    setActive(index) {  
      this.activeIndex = index;  
    },  
  },  
};  
</script>  

<style scoped>  
/* 底部导航栏样式 */  
.bottom-bar {  
  display: flex;  
  justify-content: space-around;  
  align-items: center;  
  width: 100%;  
  height: 80px;  
  background: linear-gradient(180deg, #0d2744, #103454); /* 底部渐变效果 */  
  border-top: 2px solid rgba(0, 183, 255, 0.4);  
  padding: 0 10px;  
  overflow-x: auto; /* 如果内容超出则显示横向滚动条 */  
}  

/* 导航菜单项样式 */  
.menu-item {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  width: 100px;  
  height: 100%;  
  cursor: pointer;  
  position: relative;  
  text-align: center;  
}  

/* 菜单文字样式 */  
.item-label {  
  font-size: 14px;  
  color: #fff;  
  margin-bottom: 5px;  
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.8);  
}  

/* 图标样式 */  
.item-icon {  
  width: 40px;  
  height: auto;  
}  

/* 激活状态样式 */  
.menu-item.active .item-label {  
  color: #00ffea; /* 激活后的高亮文字颜色 */  
  font-weight: bold;  
}  

.menu-item.active .item-icon {  
  filter: drop-shadow(0px 0px 10px #00ffea); /* 发光效果 */  
}  
</style>